import {Box, Static, Button, Form, FormTextArea,Pagination} from '../components'
import ALL_COMPANY_TRACES from '../graphql/AllCompanyTraces.graphql'
import {withQuery, withForm, currentUser, withData} from "../hoc";
import {compose, equals, lensProp, over, pipe, prop, reject, MutationComponent, concat, getDateTime} from '../util'
import {withState} from 'recompose'
import COMPANY_TRACE_UPSERT from '../graphql/UpsertCompanyTrace.graphql'

const InterviewProgress = ({companyId, currentUser, allCompanyTraces, _allCompanyTracesMeta:{count}, submit, state, state: {currentPage,pageSize}, setState, form: {getFieldDecorator}}) => {

    const total = Math.ceil(count / pageSize)

    return (
        <Box width='100%'>
            <Box>
                <Form>
                    <Box flex='flex' justify='flex-start' align='center'>
                        <Box width='70%' height='100%' marginRight='1rem'>
                            <FormTextArea
                                placeholder='评价'
                                row={1}
                                span={24}
                                justify='start'
                                required
                                getFieldDecorator={getFieldDecorator}
                                name='info'
                            />
                        </Box>
                        <Box width='20%'>
                            <MutationComponent
                                gql={COMPANY_TRACE_UPSERT}
                                options={{
                                    updateQueries: {
                                        AllCompanyTraces: (prev, {mutationResult: {data: {upsertCompanyTrace}}}) => {
                                            return over(lensProp('allCompanyTraces'), concat([upsertCompanyTrace]), prev)
                                        }
                                    }
                                }}
                                render={
                                    mutate => (
                                        <Button
                                            type="primary"
                                            htmlType="submit"
                                            title='新增'
                                            margin='0 1rem 1rem 0'
                                            onClick={e => submit({
                                                e,
                                                mutate,
                                                otherValues: {
                                                    on: new Date(),
                                                    by: currentUser.name,
                                                    companyId: companyId,
                                                }
                                            })}
                                        />
                                    )
                                }
                            />
                        </Box>

                    </Box>
                </Form>
            </Box>

            {
                (allCompanyTraces || []).length > 0 &&
                <Box radius='4px' padding='1rem' marginBottom='1rem' style={{border:'1px solid #d9d9d9'}}>
                    {
                        (allCompanyTraces || []).map((companyTrace) => {
                            return (
                                <Box>
                                    <Static label={`${getDateTime(companyTrace.on)} ${companyTrace.by} ${companyTrace.info}`}/>
                                </Box>
                            )
                        })
                    }
                    {
                        total > 1 &&
                        <Box marginTop='1rem'>
                            <Pagination currentPage={currentPage}
                                        onChange={x => setState({...state, currentPage: x})}
                                        pageSize={pageSize}
                                        total={count}
                            />
                        </Box>
                    }
                </Box>
            }
        </Box>
    )
}

export default compose(
    withData,
    currentUser,
    withState('state', 'setState', {
        currentPage: 1,
        pageSize: 10,
    }),
    withQuery({
        gql: ALL_COMPANY_TRACES,
        options: ({state: {pageSize, currentPage},companyId}) => ({
            variables: {
                take: pageSize,
                skip: (currentPage - 1) * pageSize,
                filter: {companyId},
                orderBy: [{column: 'createdAt', direction: 'Desc'}]
            }
        })
    }),
    withForm
)(InterviewProgress)